<template>
    <!-- Header Start -->
    <el-card shadow="never" class="!border-none">
        <el-page-header content="订单详情" @back="$router.back()" />
    </el-card>
    <!-- Header End -->

    <div class="order-detail-main">
        <!-- 订单信息 Start -->
        <el-card shadow="never" class="mt-4 !border-none" style="padding: 0 20px">
            <template #header>
                <div class="card-header">
                    <span class="font-medium">订单信息</span>
                </div>
            </template>
            <!-- 订单信息 -->
            <el-form :inline="true" :model="formData" label-width="120px">
                <el-form-item label="订单状态: ">
                    <div class="content" v-if="formData.orderStatus == 1">待付款</div>
                    <div class="content" v-if="formData.orderStatus == 2">已完成</div>
                    <div class="content" v-if="formData.orderStatus == 3">已关闭</div>
                </el-form-item>
                <el-form-item label="支付状态: ">
                    <div class="content" v-if="formData.payStatus == 0">待支付</div>
                    <div class="content" v-if="formData.payStatus == 1">已支付</div>
                </el-form-item>
                <el-form-item label="订单编号: ">
                    <div class="content">{{ formData.sn || '-' }}</div>
                </el-form-item>
                <el-form-item label="支付方式: ">
                    <div class="content" v-if="formData.payWay == 1">余额支付</div>
                    <div class="content" v-if="formData.payWay == 2">微信支付</div>
                    <div class="content" v-if="formData.payWay == 3">支付宝支付</div>
                    <div class="content" v-else>-</div>
                </el-form-item>
                <el-form-item label="下单时间: ">
                    <div class="content">{{ formData.createTime || '-' }}</div>
                </el-form-item>
                <el-form-item label="支付时间: ">
                    <div class="content">{{ formData.payTime || '-' }}</div>
                </el-form-item>
                <el-form-item label="退款状态: ">
                    <!-- <div class="content">{{ formData.refundStatus || '-' }}</div> -->
                    <div class="content" v-if="formData.refundStatus == 1">未退款</div>
                    <div class="content" v-if="formData.refundStatus == 2">部分退款</div>
                    <div class="content" v-if="formData.refundStatus == 3">全部退款</div>
                </el-form-item>
                <el-form-item label="商家备注: ">
                    <div class="content">{{ formData.shopRemark || '-' }}</div>
                </el-form-item>
            </el-form>
            <!-- Button Group Start -->
            <div class="button-group">
                <operation
                    btnStyle="primary"
                    :id="id"
                    :cancel_btn="formData.orderStatus == 1"
                    :refund_btn="formData.orderStatus == 2 && formData.refundStatus == 1"
                    :shop_remark="formData.shopRemark"
                    @refresh="getOrderDetail"
                />
            </div>
            <!-- Button Group End -->
        </el-card>
        <!-- 订单信息 End -->

        <!-- 用户信息 Start -->
        <el-card shadow="never" class="mt-4 !border-none" style="padding: 0 20px">
            <template #header>
                <span class="font-medium">用户信息</span>
            </template>
            <!-- 用户信息 -->
            <el-form :inline="true" :model="formData" label-width="120px">
                <el-form-item label="用户昵称: ">
                    <div class="content">{{ formData?.nickname || '-' }}</div>
                </el-form-item>
                <el-form-item label="用户学号: ">
                    <div class="content">{{ formData?.userSn || '-' }}</div>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 用户信息 End -->

        <!-- 商品信息 Start -->
        <el-card shadow="never" class="mt-4 !border-none" style="padding: 0 20px">
            <template #header>
                <span class="font-medium">商品信息</span>
            </template>
            <!-- 商品信息 -->
            <el-table :data="course" style="width: 100%">
                <el-table-column label="课程信息" min-width="240">
                    <template #default="scope">
                        <div class="goods-box flex items-center">
                            <el-image
                                style="width: 60px; height: 60px; flex: none"
                                :src="scope.row?.courseCover"
                                :preview-src-list="[scope.row.courseCover]"
                                :hide-on-click-modal="true"
                                :preview-teleported="true"
                                :fit="'contain'"
                            ></el-image>
                            <div class="goods-name ml-2">{{ scope.row.name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="价格" min-width="240">
                    <template #default="scope"> ¥{{ scope.row.sellPrice }} </template>
                </el-table-column>
                <el-table-column label="优惠金额" min-width="240">
                    <template #default="scope">
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="Top Left prompts info"
                            placement="top-start"
                        >
                            <template #default>
                                <div class="flex items-center">
                                    <div>
                                        {{
                                            `¥${(
                                                Number(formData.couponDiscountPrice) +
                                                Number(formData.integralDiscountPrice)
                                            ).toFixed(2)}`
                                        }}
                                    </div>
                                    <el-icon class="ml-2"><WarningFilled /></el-icon>
                                </div>
                            </template>
                            <template #content>
                                <div>
                                    <div>
                                        优惠券抵扣：¥{{
                                            Number(formData.couponDiscountPrice).toFixed(2)
                                        }}
                                    </div>
                                    <div>
                                        积分抵扣：¥{{
                                            Number(formData.integralDiscountPrice).toFixed(2)
                                        }}
                                    </div>
                                </div>
                            </template>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column property="order_amount" label="数量" min-width="240">
                    <template #default="scope"> 1 </template>
                </el-table-column>
                <el-table-column property="order_amount" label="实付金额" min-width="240">
                    <template #default="scope"> ¥{{ formData.orderAmount }} </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 商品信息 End -->

        <!-- 订单日志 Start -->
        <el-card
            shadow="never"
            v-perms="['order:log:list']"
            class="mt-4 !border-none"
            style="padding: 0 20px"
        >
            <template #header>
                <span class="font-medium">订单日志</span>
            </template>
            <!-- 订单日志 -->
            <el-table ref="tableDataRef" :data="logList" style="width: 100%">
                <el-table-column property="operatorNickname" label="操作人" max-width="300" />
                <el-table-column property="content" label="操作事件" max-width="300" />
                <el-table-column property="createTime" label="创建时间" max-width="300" />
            </el-table>
        </el-card>

        <!-- 订单日志 End -->
    </div>
</template>

<script lang="ts" setup>
import { apiOrderDetail, apiLogList } from '@/api/order/order'
import useAppStore from '@/stores/modules/app'
import { ref } from 'vue'
import Operation from './components/operation.vue'

/** Props Start **/
const route = useRoute()
const app = useAppStore()
/** Props End **/

/** Data Start **/
const id = ref<any>(route.query.id)
const formData = ref<any>({})
const logList = ref([])
const course: any = ref([])
/** Data End **/

/** Methods Start **/
/**
 * @description 订单详情
 */
const getOrderDetail = async (): Promise<void> => {
    formData.value = await apiOrderDetail({ id: id.value })
    course.value = []
    course.value.push(JSON.parse(formData.value.courseSnap))
    course.value[0].courseCover = formData.value.courseCover
    await getLogList()
}
/** Methods End **/

/** Methods Start **/
/**
 * @description 订单详情
 */
const getLogList = async () => {
    logList.value = await apiLogList({ orderId: id.value })
}
/** Methods End **/

/** Life Cycle Start **/
if (id.value) {
    getOrderDetail()
}

/** Life Cycle End **/
</script>

<style lang="scss">
.order-detail-main .el-card__header,
.order-detail-main .el-card__body {
    padding: calc(var(--el-card-padding) - 2px) 0;
}

.content {
    width: 24vw;
}

.button-group {
    padding-left: 40px;
    border-top: 1px solid #f2f2f2;
}

.goods-box {
    .goods-name {
        color: #333333;
    }
}
</style>
